<template>
	<div style="overflow-y:auto;">
      <Row v-show="!showPackageInfo">
      	<Col span="24">
          <Table :columns="packageColumns" :data="packageLists" border>
            <template slot-scope="{ row, index }" slot="packageName">
              <Input  v-model="packageLists[index].packageName" type="textarea" :autosize="{minRows: 1,maxRows: 6}" />
            </template>
            <template slot-scope="{ row, index }" slot="defaultPackage">
              <i-switch v-model="packageLists[index].defaultPackage" />
            </template>
            <template slot-scope="{ row, index }" slot="desc">
              <Input  v-model="packageLists[index].desc" type="textarea" :autosize="{minRows: 1,maxRows: 6}" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button @click="showInfo(row, index)">详情</Button>
              <Button @click="deleteRow(row, index)">删除</Button>
            </template>
          </Table>
        </Col>
      </Row>
			<Row v-if="showPackageInfo">
        <Col span="2">
          <Button @click="backShwoInfo" style="color: #2d8cf0;">
            <Icon type="md-arrow-round-back" style="font-size: 15px;padding-right:8px;line-height: 8px;" />返回
          </Button>
        </Col>
        <Divider> 关联资源 </Divider>
        <Col span="12">
          <Select v-model="checkResources" multiple  @on-change="checkResource" transfer placeholder="选择关联资源">
            <Option v-for="item in allServiceList.resourceList" :value="item.id" :key="item.id">{{item.clazz + "/" + item.serviceName + (item.subName === '' ? '': ('/'+item.subName))}}</Option>
          </Select>
        </Col>
				<Col span="24" style="margin-top: 10px;margin-bottom: 10px;">
          <resourceTable :ifedit="false" :type="'enty_resource'" :key="newResource"  v-model="packageInfo.toolServiceList" :columnsList="resourcesColumns"></resourceTable>
				</Col>
        <Divider> 关联物理机 </Divider>
        <Col span="24" style="margin-top: 10px;">
          <component v-model="packageInfo.severs" ref="serverModel"  :allServerList="allServiceList.severList" :is="'serverModel'"></component>
        </Col>
			</Row>


	</div>
</template>

<script>
	import Axios from 'axios'
	import ajax from "../../../ajax_util"
  import resourceTable from "../../../base/tables"
  import serverModel from "../apply_model/server_model.vue"

	export default {
    name: "resourceSet",
		components: {
      resourceTable, serverModel
		},
		data() {
			return {
        newResource: 0,
        packageIndex: 0,        //查看详情信息下标
        packageInfo: {},        //查看详情信息
        checkResources: [],
        showPackageInfo: false,    //显示资源配置
        resourcesColumns: [{
              title: '服务类型',
              key: 'clazz',
              align: 'left',
              width: 120,
              slot: "clazz"
            },
            {
              title: '服务类型',
              key: 'serviceName',
              align: 'left',
              width: 120,
              slot: "serviceName"
            },
            {
              title: '服务名称    ',
              key: 'subName',
              align: 'left',
              maxWidth: 200,
              slot: "subName"
            },
            {
              title: '可选项',
              key: 'options',
              align: 'left',
              slot: 'options'
            },
            {
              title: '显示权限',
              key: 'displayType',
              align: 'center',
              width: 200,
              slot: 'displayType'
            },
          ],
        packageColumns: [
          {
            title: "套餐名称",
            align: "center",
            width: 200,
            key: "packageName",
            slot: 'packageName',
          },
          {
            title: "是否为默认",
            align: "center",
            width: 200,
            key: "defaultPackage",
            slot: 'defaultPackage',
          },
          {
            title: "描述",
            align: "center",
            key: "desc",
            slot: 'desc',
          },
          {
            title: "操作",
            width: 160,
            slot: 'action',
            align: 'center',
            renderHeader: (h, index) => {
              return h('div', [
                h("Button", {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.addReseourceRow()
                    }
                  }
                }, "新增")
              ])
            }
          }
        ]
			}
		},
		computed: {
      packageLists: {
        get: function() {
            return this.value;
        },
        set: function(value) {
            this.$emit('input', value);
        }
      },
		},
		mounted() {
		},
		methods: {
      backShwoInfo(){
        this.packageLists[this.packageIndex].package = JSON.parse(JSON.stringify(this.packageInfo))

        this.packageInfo = {}
        this.checkResources = []
        // this.$forceUpdate()
        this.showPackageInfo = false
      },
      /**
       * 选择套装资源
       */
      checkResource(value){
        console.log("value ===>", value, this.checkResources)
        var temps = []
        value.forEach(item =>{
          var old = this.packageInfo.toolServiceList.find(e => e.id == item)
          if(old){
            this.$set(old, "displayType", "all")
            temps.push(old)
          }else{
            var temp = this.allServiceList.resourceList.find(e => e.id == item)
            this.$set(temp, "displayType", "all")
            this.$set(temp, "check", true)
            if(!temp.val){
              this.$set(temp, "val", temp.quotaValue)
            }
            temps.push(temp)
          }
        })
        this.packageInfo.toolServiceList = temps
      },
      /**
       * 添加套餐
       */
      addReseourceRow(){
         this.packageLists.push({
          package: { //工具关联的资源
            toolServiceList:[],
            severs:[]
          },
          packageName: "",
          defaultPackage: false,
        })
      },
      /**
       * 查看详情
       * @param {Object} row
       * @param {Object} index
       */
      showInfo(row, index){
        this.packageIndex = index
        row.package.toolServiceList.forEach(item => {
          this.checkResources.push(item.id)
        })
        this.packageInfo = row.package
        this.showPackageInfo = true
        this.toolKey = new Date().getTime()
      },
      /**
       * 删除套餐
       * @param {Object} row
       * @param {Object} index
       */
      deleteRow(row, index){
        this.packageLists.splice(index, 1);
      },
			checkTools(data){
				console.log("----------checkTools------------");
				console.log(data);
				console.log(this.toolServiceList.toolServiceList);
			},
      setQuotaValue(list, index) {
        console.log(index, list)
        var temp = []

        list.forEach(item => {
          var t = this.allServiceList.resourceList[index].options.find(e => e == item)
          if (t != undefined) {
            temp.push(item)
          }
        })
        this.allServiceList.resourceList[index].quotaValue = temp
      },


		},
		props: {
			value: {},
			allServiceList:{},
		},
		watch:{
			allServiceList(val){
				console.log("=======allServiceList=========",val);
				this.allServiceList = val;
			}
		}
	}
</script>

<style>

</style>
